<template>
     <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="aside-menu"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
      >
        <TreeMenu :menu-data="menuData" />
     </el-menu>
</template> 

<script setup>
import TreeMenu from '@/components/menu/treeMenu.vue'
import {useRouter} from 'vue-router'
import { reactive, computed } from 'vue'
const router=useRouter()

// 过滤出有 meta 信息的路由
const menuData = computed(() => {
  return router.options.routes.filter(route => route.meta)
})

const handleOpen = () => {
  console.log('menu opened')
}
const handleClose = () => {
  console.log('menu closed')
}
</script>

<style lang="less" scoped>
.aside-menu { 
    height: 100%;
}
</style>
 